<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="电站名称" prop="name">
        <el-input
            v-model="queryParams.name"
            placeholder="请输入电站名称"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search"  @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="main">
      <div class="left">
        <el-tree
            :data="stationList"
            :props="{ label: 'name', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="deptTreeRef"
            node-key="id"
            highlight-current
            @node-click="handleNodeClick"
            :default-expanded-keys="expandedKeys"
            @node-expand="handleNodeExpand"
            @node-collapse="handleNodeCollapse"/>
      </div>

      <div class="right">
        <div class="right_top">
          <div>
            <div id="dianwangImg"></div>
            <div id="dianwangText"></div>
          </div>
          <div>
            <div id="xian1"></div>
          </div>
          <div>
            <div id="gaoYaImg"></div>
            <div id="gaoYaText"></div>
          </div>
          <div>
            <div id="kuang1"></div>
          </div>
          <div>
            <div id="kuang2"></div>
          </div>
          <div>
            <div id="xian2"></div>
          </div>
          <div>
            <div id="bianyaqi"></div>
            <div id="bianYaQiText"></div>
          </div>
          <div>
            <div id="xian3"></div>
          </div>
          <div>
            <div id="diyajinxian"></div>
            <div id="diyajinxianText"></div>
          </div>

          <div>
            <div id="kuang3"></div>
          </div>
          <div>
            <div id="kuang4"></div>
          </div>

        </div>
        <div class="right_bottom">

        </div>
      </div>
    </div>
    <div class="fenYe">
      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          @pagination="getList" :pager-count=3
      />
    </div>
  </div>
</template>
<script>
import { listStation} from "@/api/system/station";
import {getGroup} from "@/api/system/group";
import {getBei} from "@/api/system/bei";
import {SVG} from "@svgdotjs/svg.js"
export default {
  name: "Index",
  data() {
    return {
      gaoYaP:0,
      gaoYaQ:0,
      gaoYaSN:"SN:861089058236887_001",
      gaoYaCos:0,
      type:"",
      openGroup:false,
      level:0,
      //默认展开的节点数组
      expandedKeys:[],
      //电站
      station:[],
      //分组
      group:[],
      //电表
      biao:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      stationList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        name: null,
        date: null
      },
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    const dianwangImg = SVG().addTo('#dianwangImg').size(100,110)
    dianwangImg.image("../src/assets/br5103/dianwang.png").size(100,110)
    const dianwangText=SVG().addTo('#dianwangText').size(100,30)
    dianwangText.text("电网").move(31,0)
    const xian1=SVG().addTo('#xian1').size(30,100)
    xian1.line(0, 65, 30, 65).stroke({ width: 3, color: "#6488B7" });

    const gaoYaImg=SVG().addTo('#gaoYaImg').size(90,110)
    gaoYaImg.image("../src/assets/br5103/gaoyabiao.png").size(90,110)
    const gaoYaText=SVG().addTo('#gaoYaText').size(90,30)
    gaoYaText.text("高压表").move(20,0)

    const kuang1=SVG().addTo('#kuang1').size(250,140)
    kuang1.rect(240,140).attr({ fill: "#DCE5E5"}).radius(6,6).move(10,0);
    kuang1.text("P: "+this.gaoYaP+" kW").move(18,10)
    kuang1.text("Q: "+this.gaoYaQ+" KVar").move(18,32)
    kuang1.text("Cosθ: "+this.gaoYaCos).move(18,54)
    kuang1.text(this.gaoYaSN).move(18,76)
    const kuang2=SVG().addTo('#kuang2').size(250,140)
    kuang2.rect(240,140).attr({ fill: "#DCE5E5"}).radius(6,6).move(10,0);
    kuang2.text("日有功电量: "+this.gaoYaP+" kWh").move(18,10)
    kuang2.text("日无功电量: "+this.gaoYaQ+" KVarh").move(18,32)
    kuang2.text("日累积Cosθ: "+this.gaoYaCos).move(18,54)
    kuang2.text("月有功电量: "+this.gaoYaCos+" kWh").move(18,76)
    kuang2.text("月无功电量: "+this.gaoYaCos+" KVarh").move(18,98)
    kuang2.text("月累积Cosθ: "+this.gaoYaCos).move(18,120)
    const xian2=SVG().addTo("#xian2").size(30,100)
    xian2.line(0, 65, 30, 65).stroke({ width: 3, color: "#6488B7" });

    const bianyaqi=SVG().addTo("#bianyaqi").size(100,110)
    bianyaqi.image("../src/assets/br5103/bianyaqi.png").size(100,110)

    const bianYaQiText=SVG().addTo('#bianYaQiText').size(90,30)
    bianYaQiText.text("变压器").move(25,0)

    const xian3=SVG().addTo("#xian3").size(30,100)
    xian3.line(0,65,30,65).stroke({width:3,color:"#6488B7"})

    const diyajinxian=SVG().addTo("#diyajinxian").size(110,110)
    diyajinxian.image('../src/assets/br5103/jinxiangui.png').size(110,110)

    const diyajinxianText=SVG().addTo('#diyajinxianText').size(100,30)
    diyajinxianText.text("低压进线柜").move(15,0)

    const kuang3=SVG().addTo('#kuang3').size(200,140)
    kuang3.rect(200,140).attr({ fill: "#DCE5E5"}).radius(6,6).move(0,0);
    kuang3.text("P: "+this.gaoYaP+" kW").move(18,10)
    kuang3.text("Q: "+this.gaoYaQ+" KVar").move(18,32)
    kuang3.text("Cosθ: "+this.gaoYaCos).move(18,54)
    kuang3.text(this.gaoYaSN).move(18,76)

    const kuang4=SVG().addTo('#kuang4').size(250,140)
    kuang4.rect(240,140).attr({ fill: "#DCE5E5"}).radius(6,6).move(10,0);
    kuang4.text("P: "+this.gaoYaP+" kW").move(18,10)
    kuang4.text("Q: "+this.gaoYaQ+" KVar").move(18,32)
    kuang4.text("Cosθ: "+this.gaoYaCos).move(18,54)
    kuang4.text(this.gaoYaSN).move(18,76)
  },
  methods: {
    /** 展开节点 */
    handleNodeExpand(data){
      let flag=false;
      this.expandedKeys.some(item=>{
        if (item===data.id){//判断当前节点是否在默认展开的数组里，如果存在就不做处理
          flag=true;
          return true;
        }
      })
      if(!flag){
        this.expandedKeys.push(data.id)
      }
    },
    /** 关闭节点 */
    handleNodeCollapse(data){
      //从expandedKeys中删除当前关闭的节点
      this.expandedKeys.some((item,i)=>{
        if(item===data.id){
          this.expandedKeys.splice(i,1)
        }
      })
      this.removeChildrenIds(data)
    },
    removeChildrenIds(data){
      const that=this;
      if(data.children){
        data.children.forEach(function (item){
          const index=that.expandedKeys.indexOf(item.id)
          if(index>0){
            that.expandedKeys.splice(index,1)
          }
          that.removeChildrenIds(item)
        })
      }
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listStation(this.queryParams).then(response => {
        this.stationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },


    /**/
    handleNodeClick(data1,data2,data3,data4){
      const level=data2.level
      this.level=level
      if(level>1){
        this.type=data1.type
      }
      if(level==1){
        //电站
        this.type=""
        this.loading = true;
        getStation2(data1.id,this)
      }else if(this.type=="高压表"||this.type=="变压器"){
        //分组
        getGroup(data1.id).then(response=>{
          this.group=[];
          this.group.push(response.data)
        })
      }else {
        //电表
        getBei(data1.id).then(response=>{
          this.biao=[];
          this.biao.push(response.data)
        })
      }
    },
  }
};
</script>
<style>
.main{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.left{
  height: 76vh;
  width: 15%;
  overflow-y:auto;
  overflow-x: auto;
  /*position: relative;*/
}
.right{
  width: 85%;

  height: 80vh;
}
.right_top{
  height: 50vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.fenYe{
  bottom: 1%;
  position: absolute;
  left: 16%
}
#kuang1{
  font-size: 13px;
}
#kuang2{
  font-size: 13px;
}
</style>
<!--
https://blog.csdn.net/weixin_47872719/article/details/128848643-->
